<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .stat-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            margin-bottom: 20px;
        }

        .stat-label {
            color: #909399;
            font-size: 14px;
            margin-bottom: 8px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
        }

        .success {
            color: #67C23A;
        }

        .primary {
            color: #409EFF;
        }

        .warning {
            color: #E6A23C;
        }
    </style>
</head>
<body>
<div id="app">
    <el-tabs type="card" @tab-click="handleClick">
        <el-tab-pane label="商家信息">
            <el-row style="margin-top: 20px;">
                <el-col :span="10">
                    <el-input v-model="tradeName" placeholder="请输入店名"></el-input>
                </el-col>
                <el-col :span="2" style="margin-left: 10px;">
                    <el-button type="primary" @click="fetchMerchants">搜索</el-button>
                </el-col>
            </el-row>
            <el-table :data="merchants" border>
                <el-table-column prop="id" label="ID" sortable width="50"></el-table-column>
                <el-table-column prop="tradeName" label="店铺名" sortable></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="contact" label="联系方式"></el-table-column>
                <el-table-column prop="keyword" label="关键词"></el-table-column>
                <el-table-column prop="businessStatus" label="营业状态" sortable></el-table-column>
                <el-table-column prop="applicationStatus" label="申请状态" sortable></el-table-column>
                <el-table-column prop="date" label="注册时间" width="200" sortable></el-table-column>
                <el-table-column prop="turnover" label="营业额"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.applicationStatus === '已通过'">
                            <el-button size="mini" @click="banMerchant(scope.row)">封禁店铺</el-button>
                        </div>
                        <div v-if="scope.row.applicationStatus === '被封禁'">
                            <el-button size="mini" @click="unbanMerchant(scope.row)">解除封禁</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalMerchants">
            </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="客户信息">
            <el-table :data="clients" border>
                <el-table-column prop="id" label="ID" sortable width="50"></el-table-column>
                <el-table-column prop="avatar" label="头像" width="75">
                    <template slot-scope="scope">
                        <div v-if="scope.row.avatar === '' || !scope.row.avatar">
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                        </div>
                        <div v-else>
                            <img :src="'img/avatar/' + scope.row.avatar"
                                 alt="头像"
                                 style="width: 50px; height: 50px; object-fit: cover">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" sortable></el-table-column>
                <el-table-column prop="signature" label="签名"></el-table-column>
                <el-table-column prop="balance" label="余额"></el-table-column>
                <el-table-column prop="coin" label="积分"></el-table-column>
                <el-table-column prop="status" label="状态" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === '正常'">
                            <el-button size="mini" @click="banClient(scope.row)">封禁</el-button>
                        </div>
                        <div v-if="scope.row.status === '封禁'">
                            <el-button size="mini" @click="unbanClient(scope.row)">解除封禁</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalClient">
            </el-pagination>
        </el-tab-pane>

        <el-tab-pane label="店铺入驻申请">
            <el-table :data="pendingMerchants" border>
                <el-table-column prop="tradeName" label="店铺名" sortable></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="contact" label="联系方式"></el-table-column>
                <el-table-column prop="keyword" label="关键词"></el-table-column>
                <el-table-column prop="date" label="申请时间" sortable></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="approveMerchant(scope.row)">批准</el-button>
                        <el-button size="mini" type="danger" @click="rejectMerchant(scope.row)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="租户充值审核">
            <el-table :data="pendingRecharges" border>
                <el-table-column prop="clientId" label="租户ID"></el-table-column>
                <el-table-column prop="amount" label="充值金额"></el-table-column>
                <el-table-column prop="date" label="申请时间" sortable></el-table-column>
                <el-table-column prop="status" label="状态"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="approveRecharge(scope.row)">批准</el-button>
                        <el-button size="mini" type="danger" @click="rejectRecharge(scope.row)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>

        <el-tab-pane label="客户签到统计">
            <el-row :gutter="20" style="margin: 20px 0">
                <el-col :span="8">
                    <div class="stat-card">
                        <div class="stat-label">平均签到天数</div>
                        <div class="stat-value success">{{ signInStatistics.averageSignInDays }} 天</div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="stat-card">
                        <div class="stat-label">平均连续签到天数</div>
                        <div class="stat-value primary">{{ signInStatistics.averageContinuousSignInDays }} 天
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="stat-card">
                        <div class="stat-label">活跃用户数(连续签到3天及以上)</div>
                        <div class="stat-value warning">{{ signInStatistics.activeClientCount }}</div>
                    </div>
                </el-col>
                <el-card class="distribution-card">
                    <div slot="header" class="clearfix">
                        <span>签到天数分布</span>
                    </div>
                    <el-table :data="distributionData" border>
                        <el-table-column prop="range" label="签到区间" width="120"></el-table-column>
                        <el-table-column label="用户数量">
                            <template slot-scope="scope">
                                <el-progress
                                        :percentage="scope.row.percentage"
                                        :color="customColors"
                                        :show-text="false">
                                </el-progress>
                                <span style="margin-left: 10px">{{ scope.row.count }} 人</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                merchants: [],
                clients: [
                    {
                        avatar: '1_1745634445096.jpg'
                    }
                ],
                pendingMerchants: [],
                pendingRecharges: [],
                isLoggedIn: false,
                currentPage: 1, // 添加分页当前页码
                pageSize: 5, // 添加分页每页显示数量
                totalMerchants: 0, // 添加总商家数
                totalClient: 0, // 添加总客户数
                tradeName: '',
                signInStatistics:
                    {
                        activeClientCount: 0,
                        averageContinuousSignInDays: 0,
                        averageSignInDays: 0,
                        signInDaysDistribution: {
                            "0-3": 0,
                            "4-7": 0,
                            "8-14": 0,
                            "15-30": 0,
                            "31-3650": 0,
                        }
                    }
            };
        },
        async mounted() {
            await this.checkAdminLoginStatus();

        },
        methods: {
            handleClick(tab) {
                if (tab.label === "商家信息") {
                    this.fetchMerchants();
                } else if (tab.label === "店铺入驻申请") {
                    this.fetchPendingMerchants();
                } else if (tab.label === "租户充值审核") {
                    this.fetchPendingRecharges();
                }
            },

            fetchMerchants() {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/getMerchants?',
                    {
                        currentPage: _this.currentPage,
                        pageSize: _this.pageSize,
                        tradeName: _this.tradeName
                    }
                )
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.merchants = response.data.data.rows;
                            _this.totalMerchants = response.data.data.totalCount;
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('获取商家信息失败');
                });
            },

            fetchPendingMerchants() {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.get('http://localhost:8080/ProjectRound1_war/admin/getPendingMerchants')
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.pendingMerchants = response.data.data;
                        } else {
                            _this.$message.error('获取待审核店铺信息失败');
                            console.error(response.data.msg);
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('获取待审核店铺信息失败');
                });
            },

            fetchPendingRecharges() {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.get('http://localhost:8080/ProjectRound1_war/admin/getPendingRecharges')
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.pendingRecharges = response.data.data;
                        } else {
                            _this.$message.error('获取待审核充值信息失败');
                            console.error(response.data.msg);
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('获取待审核充值信息失败');
                });
            },

            banMerchant(merchant) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/banMerchant', merchant.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('店铺已封禁');
                            _this.fetchMerchants();
                        } else {
                            _this.$message.error('封禁店铺失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            banClient(client) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/banClient', client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('客户已封禁');
                            _this.fetchClients();
                        } else {
                            _this.$message.error('封禁失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            unbanMerchant(merchant) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/unbanMerchant', merchant.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('已解除封禁');
                            _this.fetchMerchants();
                        } else {
                            _this.$message.error('解封禁店铺失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            unbanClient(client) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/unbanClient', client.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('已解除封禁');
                            _this.fetchClients();
                        } else {
                            _this.$message.error('解封禁失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            approveMerchant(merchant) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/approveMerchant', merchant.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('店铺入驻申请已批准');
                            _this.fetchPendingMerchants();
                        } else {
                            _this.$message.error('批准店铺入驻申请失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            rejectMerchant(merchant) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/rejectMerchant', merchant.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('店铺入驻申请已拒绝');
                            _this.fetchPendingMerchants();
                        } else {
                            _this.$message.error('拒绝店铺入驻申请失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            approveRecharge(recharge) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/approveRecharge', recharge.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('充值申请已批准');
                            _this.fetchPendingRecharges();
                        } else {
                            console.error(response.data.msg);
                            _this.$message.error('批准充值申请失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            rejectRecharge(recharge) {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                    return;
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/rejectRecharge', recharge.id)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('充值申请已拒绝');
                            _this.fetchPendingRecharges();
                        } else {
                            console.error(response.data.msg);
                            _this.$message.error('拒绝充值申请失败');
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('请求失败');
                });
            },

            checkAdminLoginStatus() {
                const _this = this;
                axios.get('http://localhost:8080/ProjectRound1_war/admin/checkLogin')
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.isLoggedIn = true;
                            _this.fetchMerchants();
                            _this.fetchPendingMerchants();
                            _this.fetchPendingRecharges();
                            _this.fetchClients();
                            _this.fetchSignInStatistics();
                        } else {
                            window.location.href = 'index.html';
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('检查登录状态失败');
                });
            },

            fetchClients() {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                }
                const _this = this;
                axios.get('http://localhost:8080/ProjectRound1_war/admin/getClients?currentPage=' + _this.currentPage + '&pageSize=' + _this.pageSize)
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.clients = response.data.data.rows;
                            _this.totalClient = response.data.data.totalCount;
                        }
                    }).catch(error => {
                    console.error(error);
                    _this.$message.error('获取商家信息失败');
                });
            },

            fetchSignInStatistics() {
                if (!this.isLoggedIn) {
                    window.location.href = 'index.html';
                }
                const _this = this;
                axios.post('http://localhost:8080/ProjectRound1_war/admin/getSignInStatistics')
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.signInStatistics = response.data.data;
                        }
                    }).catch(error => {
                    console.error(error);
                })
            },

            // 添加分页大小改变事件处理方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.fetchMerchants();
                this.fetchClients();
            },

            // 添加当前页改变事件处理方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.fetchMerchants();
                this.fetchClients();
            },
        },
        computed: {
            distributionData() {
                const total = Object.values(this.signInStatistics.signInDaysDistribution).reduce((a, b) => a + b, 0);
                return Object.entries(this.signInStatistics.signInDaysDistribution).map(([range, count]) => ({
                    range: `${range}天`,
                    count,
                    percentage: total > 0 ? Math.round((count / total) * 100) : 0
                }));
            },
            customColors() {
                return [
                    {color: '#409EFF', percentage: 20},
                    {color: '#67C23A', percentage: 40},
                    {color: '#E6A23C', percentage: 60},
                    {color: '#F56C6C', percentage: 80}
                ]
            }
        }
    });
</script>
</body>
</html>